<header class="blog-header py-3">
    <div class="row flex-nowrap justify-content-between align-items-center">
        <div class="col-4 pt-1">
            <a class="text-muted" href="/">
                <i class="material-icons" style="font-size: 28px">home</i>
            </a>
        </div>
        <div class="col-4 text-center">
            <a class="blog-header-logo text-dark" href="/">
                {% if subtitle %}
                    {{ subtitle }}
                {% else %}
                    PassNote
                {% endif %}
            </a>
        </div>

        <div class="col-4 d-flex justify-content-end align-items-center">
            <ul class="nav">
                <li class="nav-item">
                    <a class="nav-link text-muted" data-toggle="modal" data-target="#searchModal" href="#">
                        <i class="material-icons" style="font-size: 28px">search</i>
                    </a>
                </li>

                <!--检查用户是否登录-->
                {% if user_info %}
                    <a class="nav-link dropdown-toggle-split text-muted" data-toggle="dropdown" href="#" role="button" aria-haspopup="true"
                       aria-expanded="false">
                        <i class="material-icons" style="font-size: 28px">person</i>
                    </a>
                    <div class="dropdown-menu dropdown-menu-right">
                        <div class="list-group">
                            <div class="list-group-item border-0">
                                <div class="media">
                                    <img src="https://picsum.photos/32/32" class="mb-1 mr-2 rounded-circle">
                                    <div class="media-body">
                                        <div>{{ user_info.name|slice:":8" }}</div>
                                        <small class="text-muted">{{ user_info.nickname|slice:":10" }}</small>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="dropdown-divider"></div>
                        <a class="dropdown-item text-muted" href="/site/user">
                            <i class="material-icons-sm">shop</i>
                            <span>MyHome</span>
                        </a>
                        <a class="dropdown-item text-muted" href="/site/account">
                            <i class="material-icons-sm">account_box</i>
                            <span>Accounts</span>
                        </a>
                        <a class="dropdown-item text-muted" href="/site/settings">
                            <i class="material-icons-sm">settings</i>
                            <span>Settings</span>
                        </a>
                        <div class="dropdown-divider"></div>
                        <a class="dropdown-item text-muted" href="/site/logout">
                            <i class="material-icons-sm">power_settings_new</i>
                            <span>Log Out</span>
                        </a>
                    </div>
                {% else %}
                    <a class="nav-link dropdown-toggle-split text-muted" data-toggle="dropdown" href="#" role="button" aria-haspopup="true"
                       aria-expanded="false">
                        <i class="material-icons" style="font-size: 28px">person_pin</i>
                    </a>


                    <div class="dropdown-menu dropdown-menu-right">
                        <a class="dropdown-item text-muted" href="/site/sign-in">
                            <i class="material-icons-sm">assignment_ind</i>
                            <span>SignIn</span>
                        </a>
                        <div class="dropdown-divider"></div>
                        <a class="dropdown-item text-muted" href="/site/sign-up">
                            <i class="material-icons-sm">add_circle_outline</i>
                            <span>SignUp</span>
                        </a>
                    </div>
                {% endif %}
            </ul>
        </div>
    </div>
</header>

<div class="nav-scroller py-1 mb-2">
    <nav class="nav d-flex justify-content-center">
        <a class="p-2 text-muted" href="/site">
            <i class="material-icons-sm">tab</i>
            Index
        </a>

        {% if user_info %}
            <a class="p-2 text-muted" href="/site/user">
                <i class="material-icons-sm">shop</i>
                Myhome
            </a>
            <a class="p-2 text-muted" href="/site/account">
                <i class="material-icons-sm">account_box</i>
                Account
            </a>
            <a class="p-2 text-muted" href="/site/settings">
                <i class="material-icons-sm">settings</i>
                Settings
            </a>
            <a class="p-2 text-muted" href="/site/logout">
                <i class="material-icons-sm">power_settings_new</i>
                Logout
            </a>
        {% else %}
            <a class="p-2 text-muted" href="/site/sign-in">
                <i class="material-icons-sm">assignment_ind</i>
                Sign In
            </a>
            <a class="p-2 text-muted" href="/site/sign-up">
                <i class="material-icons-sm">add_circle_outline</i>
                Sign Up
            </a>
        {% endif %}


        <a class="p-2 text-muted" href="https://blog.deali.cn">
            <i class="material-icons-sm">label</i>
            Blog
        </a>
        <a class="p-2 text-muted" href="/site/unavailable">
            <i class="material-icons-sm">cloud_download</i>
            Download
        </a>
        <a class="p-2 text-muted" href="/site/unavailable">
            <i class="material-icons-sm">info</i>
            Docs
        </a>
        <a class="p-2 text-muted" href="/site/unavailable">
            <i class="material-icons-sm">question_answer</i>
            FAQ
        </a>
    </nav>
</div>

<!-- PassNote Search Modal -->
<div class="modal" id="searchModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">PassNote Search</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form class="form-inline my-2 my-lg-0">
                    <input class="form-control mr-sm-2" type="search" placeholder="Search">
                    <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
                </form>
            </div>
            <div class="modal-footer">
                {#                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>#}
                {#                <button type="button" class="btn">Save changes</button>#}
            </div>
        </div>
    </div>
</div>